<template>
  <section class="searchForm">
    <a-form
      ref="searchParam"
      :model="searchParam"
      :rules="searchConfig.rules?searchConfig.rules:rules"
      :label-col="searchConfig.labelCol?searchConfig.labelCol:labelCol"
      :wrapper-col="searchConfig.wrapperCol?searchConfig.wrapperCol:wrapperCol"
    >
      <a-row type="flex" justify="space-between">
        <template v-for="(item, index) in searchConfig.formItemList">
          <template v-if="item.type === 'input'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <Input
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :placeholder="item.placeholder"
              ></Input>
            </a-col>
          </template>
          <template v-else-if="item.type === 'inputNum'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <InputNumber
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :min="item.min"
                :max="item.max"
                :placeholder="item.placeholder"
              ></InputNumber>
            </a-col>
          </template>
          <template v-else-if="item.type === 'select'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <Select v-if="item.change"
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :optList="item.optList"
                :multiple="item.multiple"
                :placeholder="item.placeholder"
                @change="item.change"
              ></Select>
              <Select v-else
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :optList="item.optList"
                :multiple="item.multiple"
                :placeholder="item.placeholder"
              ></Select>

            </a-col>
          </template>
          <template v-else-if="item.type === 'selectTree'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <template v-if="item.change">
                <treeSelect
                  :form="searchParam"
                  :prop="item.prop"
                  :label="item.label"
                  :treeData="item.treeData"
                  :placeholder="item.placeholder"
                  @change="item.change"
                ></treeSelect>
              </template>
              <template v-else-if="item.select">
                <treeSelect
                  :form="searchParam"
                  :prop="item.prop"
                  :label="item.label"
                  :treeData="item.treeData"
                  :placeholder="item.placeholder"
                  @select="item.select"
                ></treeSelect>
              </template>
              <template v-else>
                <treeSelect
                  :form="searchParam"
                  :prop="item.prop"
                  :label="item.label"
                  :treeData="item.treeData"
                  :placeholder="item.placeholder"
                ></treeSelect>
              </template>
            </a-col>
          </template>
          <template v-else-if="item.type === 'datePicker'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <template v-if="item.change">
                <datePicker
                  :form="searchParam"
                  :prop="item.prop"
                  :label="item.label"
                  :placeholder="item.placeholder"
                  :format="item.format"
                  :valueFormat="item.valueFormat"
                  :dateType="item.dateType"
                  @change="(e) => { item.change(e, searchParam) }"
                ></datePicker>
              </template>
              <template v-else>
                <datePicker
                  :form="searchParam"
                  :prop="item.prop"
                  :label="item.label"
                  :placeholder="item.placeholder"
                  :format="item.format"
                  :valueFormat="item.valueFormat"
                  :dateType="item.dateType"
                ></datePicker>
              </template>
            </a-col>
          </template>
          <template v-else-if="item.type === 'rangeDatePicker'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <rangeDatePicker
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :placeholder="item.placeholder"
                :format="item.format"
                :valueFormat="item.valueFormat"
                :showTime="item.showTime"
                :isMonth="item.isMonth?item.isMonth:false"
              ></rangeDatePicker>
            </a-col>
          </template>
          <template v-else-if="item.type === 'timePicker'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <timePicker
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :placeholder="item.placeholder"
              ></timePicker>
            </a-col>
          </template>
          <template v-else-if="item.type === 'rangeTimePicker'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <rangeTimePicker
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :placeholder="item.placeholder"
              ></rangeTimePicker>
            </a-col>
          </template>
          <template v-else-if="item.type === 'faultSelect'">
            <a-col
              :span="useColumnCount()"
              :key="index"
              v-show="24/useColumnCount() - 1 > index || advanced"
            >
              <faultMultipleSelection
                :form="searchParam"
                :prop="item.prop"
                :label="item.label"
                :placeholder="item.placeholder"
              ></faultMultipleSelection>
            </a-col>
          </template>
        </template>
        <a-col :span="searchBoxSpan()" style="display:flex;justify-content: flex-end">
          <a-form-item :wrapper-col="{ span: 24 }">
            <Button type="search" @click="searchInfo"></Button>
            <Button type="reset" style="margin-left: 3px" @click="clearSearchInfo"></Button>
            <template v-if="24/useColumnCount() <= searchConfig.formItemList.length">
              <a @click="() => (this.advanced = !this.advanced)">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </template>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </section>
</template>

<script>
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import Select from '@/components/typicalControl/select';
import treeSelect from '@/components/typicalControl/treeSelect';
import datePicker from '@/components/typicalControl/datePicker';
import rangeDatePicker from '@/components/typicalControl/rangeDatePicker';
import timePicker from '@/components/typicalControl/timePicker';
import rangeTimePicker from '@/components/typicalControl/rangeTimePicker';
import Button from '@/components/typicalControl/button';
import faultMultipleSelection from '@/components/typicalControl/faultMultipleSelection';
export default {
  name: 'TypicalSearch',
  components: {
    Input: Input,
    InputNumber: InputNumber,
    Select: Select,
    treeSelect: treeSelect,
    datePicker: datePicker,
    rangeDatePicker: rangeDatePicker,
    timePicker: timePicker,
    rangeTimePicker: rangeTimePicker,
    faultMultipleSelection: faultMultipleSelection,
    Button: Button
  },
  props: {
    searchConfig: {
      type: Object,
      default: () => {
        return {
          formItemList: []
        };
      }
    }
  },
  data() {
    return {
      placeholderSelect: '全部', // 默认下拉提示信息
      labelCol: {
        span: 7
      },
      wrapperCol: {
        span: 17
      },
      columnCount: 6, // 行栅格个数
      rules: {},
      advanced: true, // 控制搜索条件的展开折叠
      searchParam: {}
    };
  },
  created() {
    this.Initialization();
  },
  mounted() {
  },
  methods: {
    searchBoxSpan() {
      var number = this.searchConfig.formItemList.length;
      // 一行几个
      const rowNumber = 4;
      if (this.advanced) {
        return (rowNumber - number % rowNumber) * this.columnCount;
      } else {
        return rowNumber;
      }
    },
    /**
     * [Initialization 初始化组件配置生成双向绑定数据]
     * @param {[type]} searchParamData [更新默认参数]
     */
    Initialization(searchParamData) {
      const controlData = this.searchConfig.formItemList;
      for (var i = 0; i < controlData.length; i++) {
        if (searchParamData && searchParamData[controlData[i].prop]) {
          this.$set(this.searchParam, controlData[i].prop, this.deepClone(searchParamData[controlData[i].prop]));
          continue;
        }
        this.$set(this.searchParam, controlData[i].prop, this.deepClone(controlData[i].value));
      }
    },
    /**
     * 查询
     */
    searchInfo() {
      const dataJson = this.decodeSearchParam();
      if (this.searchConfig.parent && this.searchConfig.parent.$refs.insideTable) {
        const table = this.searchConfig.parent.$refs.insideTable._getTableData();
        Object.assign(dataJson, table);
        // 搜索按钮事务，页码归0
        dataJson.pageNumber = 0;
        this.searchConfig.parent.$refs.insideTable.setCurrentPage(dataJson);
      }
      this.$emit('searchMethod', dataJson);
    },
    /**
     * 重置查询条件
     */
    clearSearchInfo() {
      const controlData = this.searchConfig.formItemList;
      for (var i = 0; i < controlData.length; i++) {
        this.searchParam[controlData[i].prop] = this.deepClone(controlData[i].value);
      };
      const dataJson = this.decodeSearchParam();
      this.$emit('clearMethod', dataJson);
    },
    /**
     * [decodeSearchParam 编码数据符合接口格式]
     * @return {[type]} [description]
     */
    decodeSearchParam() {
      var dataJson = {};
      Object.assign(dataJson, this.searchParam);
      var key, arr;
      for (key in dataJson) {
        // 说明是符合属性组成的数组
        if (key.indexOf('&') !== -1) {
          arr = key.split('&');
          dataJson[arr[0]] = dataJson[key][0];
          dataJson[arr[1]] = dataJson[key][1];
          delete dataJson[key];
        }
      }
      // 删除空字符串对象属性
      for (key in dataJson) {
        if (dataJson[key] === '') {
          delete dataJson[key];
        }
      }
      return dataJson;
    },
    /**
     * [useColumnCount 使用的ColumnCount]
     * @return {[type]} [description]
     */
    useColumnCount() {
      return this.searchConfig.columnCount ? this.searchConfig.columnCount : this.columnCount;
    },
    /**
     * [deepClone 深度拷贝（拷贝的方法引用地址）]
     * @param  {[type]} val [拷贝的数据源]
     * @return {[type]}     [拷贝后的数据]
     */
    deepClone(val) {
      if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean' || typeof val === 'undefined') {
        return val;
      } else if (Array.isArray(val)) {
        var _arr = [];
        val.forEach(item => { _arr.push(item); });
        return _arr;
      } else if (typeof val === 'object') {
        var _obj = {};
        for (const key in val) {
            _obj[key] = this.deepClone(val[key]);
        }
        return _obj;
      } else {
        return val;
      }
    },
    /**
     * [_getSearchData 得到搜索条件信息（专供table组件使用）]
     * @return {[type]} [description]
     */
    _getSearchData() {
      return this.decodeSearchParam();
    },
  },
  destroyed() {
  }
};
</script>

<style>
  .searchForm {
    padding: 10px 10px 0 0;
    background: #fff;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .searchForm .ant-form-item {
    margin-bottom: 10px;
  }
</style>
